<template>
	<view>
		<view class="temp" v-if="config.bg">
			<image class="bg" :src="config.bg.info" mode="aspectFill"></image>
			<view class="mask"></view>
			<view class="main">
				<image class="card" v-if="config.card.type==='image'" :src="config.card.info" mode="aspectFill"></image>
				<view class="text">
					<out-text :text='config.text' icon="heart-fill"></out-text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'tem-page01',
		props: ['config']
	}
</script>
<style lang="scss">
	.temp {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: -10;
		}

		.mask {
			z-index: -1;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.main {
			display: flex;
			flex-direction: column;
			width: 750rpx;
			margin-top: 210rpx;
			padding: 40rpx;
			justify-content: center;
			align-items: center;

			.card {
				height: 450rpx;
				width: 630rpx;
				border-radius: 8rpx;
				border: 20rpx solid #FFFFFF;
			}

			.text {
				color: #fff;
				width: 100%;
				margin-top: 150rpx;
				border-radius: 4rpx;
				padding: 30rpx;
				background-color: rgba(255, 255, 255, 0.5);
			}
		}
	}
</style>
